<template>
  <div>
    <div class="back">
      <van-tabs v-model="activeName">
        <van-tab title="综合" name="a">
          <button class="btn1">有货</button>
          <button class="btn2">离岛自提商品</button>
          <button class="btn2">价格</button>
          <button class="btn2">筛选</button>
        </van-tab>
        <van-tab title="销量" name="b"></van-tab>
        <van-tab title="价格" name="c"></van-tab>
        <van-tab title="筛选" name="c"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Button } from "vant";

Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      activeName: "a",
    };
  },
};
</script>

<style scoped>
.back {
  background: white;
  margin-bottom: 5px
}
.btn1 {
  background: rgb(250, 190, 200);
  border-radius: 15px;
  border: 1px solid #ececec;
  border-color: white;
 
  margin: 10px;
  margin-left: 28px;
  margin-right: -1px;
  padding: 3px;
}
.btn2 {
  background: white;
  border-radius: 15px;
    border: 1px solid #ececec;

  margin: 10px;
  margin-left: 28px;
  margin-right: -1px;
  padding: 3px;
}
</style>